<script lang="ts" setup>
import { ref, reactive, inject, onMounted } from 'vue'
import couponItem from './couponItem.vue'
import { getMyCouponsApi } from '@/services/home'
import { useDeviceStore, useMemberStore } from '@/stores'
import { postDetailsCouponApi } from '@/services/my'
import type { detailsCouponType } from '@/types/eat'

const memberStore = useMemberStore()
const deviceStore = useDeviceStore()
const qrcode = ref('')
const qrRef = ref()
const props = defineProps<{
  parm?: string
  params?: detailsCouponType
}>()

/** 获取我的优惠券 */
const getMyCoupons = async () => {
  let res
  console.log(props.params)
  if (!props.params) {
    res = await getMyCouponsApi({
      status:
        props.parm === 'NotStart'
          ? 1
          : props.parm === 'Expired'
          ? 3
          : props.parm === 'Used'
          ? 0
          : 10,
      clientId: memberStore.userInfo?.id,
      pageNum: 1,
      pageSize: 99999,
    })

    couponList.value = res.data.rows || []
    console.log('获取我的优惠券', couponList.value)
  } else {
    console.log(props.params)
    const params = {
      machineId: props.params.machineId,
      priceOriginal: props.params.priceOriginal,
      shoppingCartList: props.params.shoppingCartList,
    }
    res = await postDetailsCouponApi(params)
    console.log('详情页', res)
    if (props.parm === 'CanBeUsed') {
      couponList.value = res.data?.availableCoupons || []
      // 数组有值再操作
      if (couponList.value.length) {
        couponList.value.forEach((ev: any) => {
          if (props.params?.id == ev.id) {
            ev.isSelected = true
          } else {
            ev.isSelected = false
          }
        })
      }
    } else if (props.parm === 'CantUsed') {
      couponList.value = res.data?.unavailableCoupons || []
    }
  }
  console.log(couponList.value)
}

let couponList = ref<any>([

])

type couponitem = {
  id: number
  rule: string
  validity: string
  price: string
  usable: string
  isSelected: boolean
}
/**获取子组件传来的item进行对比 */
const clearAllSelections = (item: couponitem) => {
  couponList.value.forEach((ev: any) => {
    ev.isSelected = false
  })
  // 找到与 item.id 匹配的元素，并将其 isSelected 设为 true
  const matchedItem = couponList.value.find((ev: any) => ev.id === item.id)
  if (matchedItem) {
    matchedItem.isSelected = true
  }
  console.log(matchedItem)
  // 返回上一级页面并传递数据
  uni.$emit('navigateBack', { id: matchedItem?.id })
  uni.navigateBack({
    delta: 1,
  })
  // uni.redirectTo({
  //   url: `/pagesEat/billingPage/billingPage?id=${matchedItem?.id}`,
  // })
}
/**打开二维码弹窗 */
const openPopup = (i: any) => {
  qrcode.value = i.id
  qrRef.value?.open()
}

defineExpose({
  getMyCoupons,
})
</script>

<template>
  <view class="center">
    <view class="coupon-box" v-if="couponList.length > 0">
      <uni-notice-bar
        v-if="parm === 'NotStart' && couponList.length >= 200"
        background-color="#FFAE00B2"
        color="#fff"
        single
        text="您的优惠券卡包已满啦，请及时使用~"
      />
      <couponItem
        v-for="item in couponList"
        @editSelections="clearAllSelections"
        @openPopup="openPopup"
        :key="item.id"
        :couponItem="item"
        :parm="props.parm"
      />
    </view>
    <view v-else>
      <view class="vacancy">
        <image class="else_image" src="/static/images/coupon2.png" mode="scaleToFill" />
        <text class="else_text">当前您还没有优惠券哦~</text>
      </view>
    </view>
    <BjsQrCodePopup ref="qrRef" :qrcodeUrl="qrcode" @refresh="getMyCoupons" />
  </view>
</template>

<style lang="scss">
.coupon-box {
  position: relative;
}
</style>
